<template>
    <el-header  class="app-header">
        <div class="header-nav">
              <div class="lf">
                    <!-- <img src="@/assets/logo.png" alt="" @click="handleShow"> -->
                    <el-icon size="25" @click="handleShow">
                        <Menu ></Menu>
                    </el-icon>
                    <span>后台管理系统</span>
              </div>
              <div class="rg">
                
                <el-dropdown>
                  <span class="el-dropdown-link">
                    <!-- <img src="@/assets/logo.png" alt=""> -->
                    
                    <span>欢迎 {{$store.state.user_info.userName}} 回来</span>
                   <el-icon size="20"><UserFilled /></el-icon>
                   <el-icon><ArrowDown /></el-icon>
                   
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="handleGoto">个人中心</el-dropdown-item>
                      <el-dropdown-item @click="openRestPassword">修改密码</el-dropdown-item>
                      <el-dropdown-item @click="logOut">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
             
              </div>
        </div>
    </el-header>
</template>

<script lang="ts" setup>
import { ArrowDown ,Menu,UserFilled} from '@element-plus/icons-vue'
import { useRouter } from "vue-router";
import { useStore } from "vuex"
import { authLogOut } from '@/server/user'
import { ElMessage } from 'element-plus'
import {reactive} from 'vue'
const router=useRouter()
const store=useStore()
const handleShow=()=>{
  store.commit("changeCollapsed",!store.state.isCollapsed)
}
const handleGoto =()=>{
    router.push({path:"/center"})
}
const openRestPassword= ()=>{
  store.commit('changRestPassword',true)
}
const logOut=async ()=>{
  // authLogOut()
  ElMessage.success("退出登录")
  setTimeout(() => {
    localStorage.removeItem("token")
    router.push({path:"/login"})
  }, 1000);
}
</script>

<style lang="scss" scoped>
.app-header{
  background-color: #263445;
  color:rgb(191, 203, 217);
  .header-nav{
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .lf{
      display: flex;
      align-items: center;
      font-size: 18px;
      .el-icon{
        margin-right: 10px;
      }
      img{
        width: 50px;
        height: 50px;
        margin-left: 20px;
      }
    }
    .rg{
      .el-dropdown-link{
        display: flex;
        align-items: center;
        color: #fff;
        .el-icon{
          margin-left: 10px;
        }
        img{
          width: 40px;
          height: 40px;
        }
      }
     
    }
  }
}
</style>